<template>
    <div class="preview-pdf">
        <iframe v-if="supported" :src="`${url}#toolbar=0&zoom=85`" frameborder="0" @load="$emit('supported')"
            @error="onError"></iframe>
        <div v-else class="pdf-unsupported">
            <p>您的浏览器不支持PDF预览或加载失败。</p>
            <el-button type="primary" @click="$emit('download')">下载文件</el-button>
        </div>
    </div>
</template>

<script setup>
defineProps({
    file: {
        type: Object,
        required: true
    },
    url: {
        type: String,
        required: true
    },
    supported: {
        type: Boolean,
        default: true
    }
})

const emit = defineEmits(['supported', 'unsupported', 'error', 'download'])

const onError = (e) => {
    emit('unsupported')
    emit('error', e)
}
</script>

<style scoped>
.preview-pdf {
    width: 100%;
    /* 增大默认高度，例如 80vh 或具体像素值 */
    height: 80vh;
    border: none;
    display: flex;
    flex-direction: column;
}

.preview-pdf iframe {
    width: 100%;
    /* iframe 高度占满父容器 */
    height: 100%;
    border: none;
}

.pdf-unsupported {
    text-align: center;
    /* 内边距调整以适应更大的容器 */
    padding: 60px 20px;
    color: #f56c6c;
    /* 占满父容器并居中内容 */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pdf-unsupported p {
    margin: 15px 0;
    /* 稍微增大段落间距 */
}
</style>
